<template>
  <div class="sidebar" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(50, 65, 87, 0.8)">
    <el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="sidebar.collapse" background-color="#324157"
      text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router>
      <!-- TODO:新增一个组件 嵌套循环组件生成菜单组 -->
      <!-- <template v-for="item in items">
        <template v-if="item.type === 1">
          <el-sub-menu :index="item.path" :key="item.id">
            <template #title>
              <el-icon>
                <component :is="item.icon"></component>
              </el-icon>
              <span>{{ item.title }}</span>
            </template>
            <template v-for="subItem in item.items">
              <template v-if="subItem.type === 1">
                <el-sub-menu :index="subItem.path" :key="subItem.id">
                  <template #title>
                    <span>{{ subItem.title }}</span>
                  </template>
                  <template v-for="threeItem in subItem.items">
                    <template v-if="threeItem.type === 2">
                      <el-menu-item :index="threeItem.path" :key="threeItem.id">
                        {{ threeItem.title }}
                      </el-menu-item>
                    </template>
                  </template>
                </el-sub-menu>
              </template>
              <template v-else-if="subItem.type === 2">
                <el-menu-item :index="subItem.path" :key="subItem.id">
                  {{ subItem.title }}
                </el-menu-item>
              </template>
            </template>
          </el-sub-menu>
        </template>
        <template v-else-if="item.type === 2">
          <el-menu-item :index="item.path" :key="item.id">
            <el-icon>
              <component :is="item.icon"></component>
            </el-icon>
            <template #title>{{ item.title }}</template>
          </el-menu-item>
        </template>
      </template> -->

      <WMenu :items="items"></WMenu>
    </el-menu>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';
import { useRoute } from 'vue-router';
import WMenu from '@/components/w-menu.vue';
import { useSidebarStore } from '@/store/sidebar';
import { useMenuStore } from '@/store/menu';

const route = useRoute();
const loading = ref(false);
let items = reactive([]);
const sidebar = useSidebarStore();
const menuStore = useMenuStore();
items = menuStore.menuList;

const onRoutes = computed(() => {
  return route.path.replace('/', '');
});
</script>

<style scoped>
.sidebar {
  display: block;
  position: absolute;
  left: 0;
  top: 70px;
  bottom: 0;
  overflow-y: scroll;
}

.sidebar::-webkit-scrollbar {
  width: 0;
}

.sidebar-el-menu:not(.el-menu--collapse) {
  width: 250px;
}

.sidebar > ul {
  height: 100%;
}
</style>